<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layui/axios.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/common.js"></script>

</head>
<body>
<table class="layui-table"
       lay-data="{url:'${pageContext.request.contextPath}/teacher/list', limits: [20, 40], page:true, id:'job', toolbar: '#toolbar'}"
       lay-filter="job">
    <thead>
    <tr>
        <th lay-data="{field:'', type: 'checkbox', width:'3%'}">全选/取消</th>
        <th lay-data="{field:'id', width:'15%'}">工号</th>
        <th lay-data="{field:'name', width:'18%'}">姓名</th>
        <th lay-data="{field:'email', width:'15%'}">邮箱</th>
        <th lay-data="{field:'sex', width:'8%'}">性别</th>
        <th lay-data="{field:'phone', width:'13%'}">电话号码</th>
        <th lay-data="{field:'courseName', width:'15%'}">教授课程</th>
        <th lay-data="{field:'', toolbar: '#barDemo'}">操作</th>
    </tr>
    </thead>
</table>


<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit layui-font-12"></i>编辑
    </button>
    <button class="layui-btn layui-btn-danger layui-btn-xs " lay-event="del"><i
            class="layui-icon layui-icon-delete layui-font-12"></i>删除
    </button>
</script>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn" lay-event="add"><i class="layui-icon layui-icon-addition"></i>添加教师
        </button>
        <button type="button" class="layui-btn" lay-event="batch-remove"><i class="layui-icon layui-icon-delete"></i>批量删除
        </button>
    </div>
</script>

<script>
    layui.use("table", function () {
        let table = layui.table;
        let $ = layui.jquery
        // 给 table 的 toolbar 中定义的 按钮 绑定单击事件
        table.on("toolbar(job)", function (obj) {
            // 获取 单击的按钮类型, 是否为 lay-event="add"
            if (obj.event === 'add') {
                // 弹出添加部门的窗口
                let index = layer.open({
                    type: 2,  // iframe 窗口
                    title: this.innerHTML,  // 弹出窗口的标题
                    content: ['${pageContext.request.contextPath}/teacher/add', 'no'], // iframe 的 url, no 代表不产生滚动条
                    area: ['700px', '500px'],   // 弹出层的宽高
                    btn: ["保存", "关闭"],
                    btn1: function (index, layero) {
                        // 关闭 弹出层
                        $("iframe", layero)[0].contentWindow.layui.form.submit()
                        return false; // 阻止默认行为,关闭窗口
                    }
                })
            } else if (obj.event === "batch-remove") {
                // 批量删除 、获取 复选框选中的所有数据
                let checkStatus = table.checkStatus('job');
                let ids = checkStatus.data.map(d => d.id)
                if (ids.length == 0) {
                    layer.msg("请至少勾选一个要删除的教师信息");
                    return;
                }
                layer.confirm('您确定要删除选择的所有教师的信息吗？', {icon: 3, title: '提示'}, function (index) {
                    axios.delete("/teacher/batch/remove", {data: ids}).then(ret => {
                        if (ret.data.status) {
                            layer.close(index);
                            layer.msg("教师信息删除成功")
                            table.reload("job")
                        }
                    })
                });
            }
        })

        // 给 table 表格中 每一列中的 编辑按钮绑定事件
        table.on("tool(job)", function (obj) {
            // 获取 单击的按钮类型, 是否为 lay-event="edit"
            if (obj.event === 'edit') {
                // 弹出添加部门的窗口
                let index = layer.open({
                    type: 2,  // iframe 窗口
                    title: this.innerHTML,  // 弹出窗口的标题
                    content: ['${pageContext.request.contextPath}/teacher/modify/' + obj.data.id, 'no'], // iframe 的 url, no 代表不产生滚动条
                    area: ['700px', '450px'],   // 弹出层的宽高
                    btn: ["保存", "关闭"],
                    btn1: function (index, layero) {
                        // 关闭 弹出层
                        $("iframe", layero)[0].contentWindow.layui.form.submit()
                        return false; // 阻止默认行为,关闭窗口
                    }
                })
            } else if (obj.event == "del") {
                layer.confirm('您确定要删除该教师的信息吗？', {icon: 3, title: '提示'}, function (index) {
                    axios.delete("/teacher/remove/" + obj.data.id).then(ret => {
                        if (ret.data.status) {
                            layer.close(index);
                            layer.msg("教师信息删除成功")
                            table.reload("job")
                        }
                    })
                });
            }
        })
    })
</script>

</body>
</html>
